<html>
<head>
    <title>摄像头档案</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }
        .input_xl{
            width: 60%;
        }

    </style>
</head>
<body>
<div class="page" id="page-elesafe">

    <div class="page-title">视频管理 › 摄像头档案</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="projectName" placeholder="请输入企业名称关键字" style="width: 220px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            <el-button type="primary" @click="addClick" style="background: #5BBD8B">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table border stripe style="width: 100%;margin-bottom: 50px" height="500"  :data="videoData">
                    <el-table-column prop="projectName" label="企业名称" align="center"></el-table-column>
                    <el-table-column prop="CaptorName" label="视频名称" align="center">
                    </el-table-column>
                    <el-table-column prop="time" label="安装时间" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"
                                       icon="el-icon-edit"></el-button>
                            <el-button round icon="el-icon-delete" size="small"
                                       @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page-footer" style="left:auto">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>


            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑摄像头':'新增摄像头'" :visible.sync="dialogFormVisible" center width="50%"
                   :show-close="false">
            <el-dialog title="企业选择" :visible.sync="dialogProVisible" center width="100%"  :fullscreen="true" :append-to-body="true">
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="project.projectName" placeholder="请输入企业名称关键字" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="pro_search" style="background: #578BBB">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table border stripe style="width: 100%;margin-bottom: 50px" height="500" :data="proData" size="mini">
                    <el-table-column prop="projectName" label="企业名称" align="center"></el-table-column>
                    <el-table-column prop="city" label="市" align="center"></el-table-column>
                    <el-table-column prop="zone" label="区" align="center"></el-table-column>
                    <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
                    <el-table-column prop="legalMan" label="法人" align="center"></el-table-column>
                    <el-table-column prop="legalPhone" label="法人电话" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="handleSelect(scope.row)" round size="small"
                                       icon="el-icon-check"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page-footer" style="left:auto">
                    <el-pagination background layout="prev, pager, next" :pagesize="project.pagesize" :total="project.totalCount"
                                   :current-page.sync="project.pageno" @current-change="onChangeProjectPage">
                    </el-pagination>
                </div>
            </el-dialog>

            <el-form :model="form" ref="form">

                <el-form-item label="视频名称" prop="CaptorName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="form.CaptorName" class="input_xl" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="安装时间" prop="time" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'安装时间不能为空!',trigger:'blur'}]">
                    <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.time"
                                    placeholder="日期" suffix-icon="el-icon-date" class="input_xl"></el-date-picker>
                </el-form-item>
                <el-form-item label="接入方式" prop="State" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'接入方式不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.State" placeholder="请选择接入方式" @change="handle_select" class="input_xl">
                        <el-option
                                v-for="item in StateList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="视频ID"  :label-width="formLabelWidth"  prop="videoNo" v-if="form.State==2||form.State == 3">
                    <el-input v-model="form.videoNo" autocomplete="off" class="input_xl"></el-input>
                </el-form-item>
                <el-form-item label="视频编码" prop="Url1" :label-width="formLabelWidth"  v-if="form.State==2||form.State==1">
                    <el-input v-model="form.Url1" autocomplete="off" class="input_xl"></el-input>
                </el-form-item>
                <el-form-item label="视频序列" prop="Url2" :label-width="formLabelWidth" v-if="form.State==3||form.State==1">
                    <el-input v-model="form.Url2" autocomplete="off" class="input_xl"></el-input>
                </el-form-item>
                <el-form-item label="企业名称" prop="projectName" :label-width="formLabelWidth"  :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                            ]">
                    <el-input v-model="form.projectName" autocomplete="off" class="input_xl" disabled="true"></el-input>
                    <el-button type="primary" @click="showPro">选择企业</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" type="info">取 消</el-button>
                <el-button @click="submitClick('form')" type="success">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-elesafe',
        data: {
            formLabelWidth: '120px',
            day: '',
            videoData: '',
            dialogFormVisible: false,
            currentPage: 1,
            form: {},
            editMod: false,
            zoneList: '',
            proList: '',
            projectName: '',
            proNo: '',
            zoneId: '',
            pagesize: 10,
            pageno: 1,
            StateList:[
                {value:0,label:'NVR接入'},{value:1,label:'萤石云接入'},{value:2,label:'GBS接入'},{value:3,label:'HIK接入'},
            ],
            totalCount: 0,
            proData:[],
            project:{
                pageno:1,
                pagesize:10,
                projectName:'',
                totalCount:0,
            },
            dialogProVisible:false,
        },
        methods: {
            search: function () {
                this.pageno = 1
                this.getVideo();
            },
            addClick: function () {
                this.form = {};
                this.editMod = false;
                this.dialogFormVisible = true;
            },
            userNode(data) {

            },
            handleClick(data) {
                console.log(data);
                this.editMod = true;
                this.dialogFormVisible = true;
                // this.form = data;
                this.form = Object.assign({},this.form, data);
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('VideoCaptor/delete', {Id: data.Id}).success((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getVideo();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.editMod) {
                            HttpUtil.get('VideoCaptor/update', this.form).success((res) => {
                                this.getVideo();
                                this.cancelClick(formName);
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                })
                            })
                        } else {
                            if (this.form.State == 2){
                                if (!this.form.videoNo){
                                    this.$message.warning('视频编码不能为空');
                                    return;
                                }
                            }
                            HttpUtil.get('VideoCaptor/AddVideo', this.form).success((res) => {
                                if (res.state == 0){
                                    this.getVideo();
                                    this.cancelClick(formName);
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功'
                                    })
                                }

                            })
                        }

                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }

                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.getVideo();
            },
            cancelClick(formName) {
                this.$refs[formName].clearValidate()
                this.dialogFormVisible = false;
            },
            handle_select(val){

            },
            handleSelect(row){
                this.form.projectName = row.projectName;
                this.form.projectNo  = row.projectNo;
                this.dialogProVisible = false;
            },
            getVideo() {
                let param = {};
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.projectName = this.projectName;
                HttpUtil.get('VideoCaptor/list', param).success((res) => {
                    this.videoData = res.data;
                    vuePage.totalCount = res.total;
                });
            },
            onChangeProjectPage(page){
                this.project.pageno = page;
                this.getPro();
            },
            showPro(){
                this.project = {
                        pageno:1,
                        pagesize:10,
                        projectName:'',
                        totalCount:0,
                };
                this.dialogProVisible = true;
                this.getPro();
            },
            pro_search(){
              this.project.pageno = 1;
              this.getPro();
            },
            getPro(){
                HttpUtil.get('project/List',this.project).success((res)=>{
                    this.proData = res.data;
                    this.project.totalCount  = res.total;
                })
            }
        },
        created: function () {
            this.getVideo();
        },
        mounted: function () {

        }
    });


</script>

</body>
</html>
